<script type="text/ng-template" id="skins/Conversation">
  <link rel="stylesheet" type="text/css"
        href="/extensions/skins/conversation_v1/static/conversation.css">

  <div ng-style="getStyle()">
    <div class="hidden-xs hidden-sm pull-right btn-group-vertical" data-spy="affix" data-offset-top="50" style="right: 50px;">
      <a class="btn btn-default protractor-test-restart-exploration" ng-click="resetPage()" style="text-align: left;">
        <span class="glyphicon glyphicon-refresh"></span>
        Restart
      </a>
      <button class="btn btn-default" ng-click="showFeedbackModal()" style="text-align: left;">
        <span class="glyphicon glyphicon-envelope"></span>
        Feedback
      </button>
      <a class="btn btn-default" ng-click="openExplorationEditorPage()" style="text-align: left;" target="_blank">
        <span class="glyphicon glyphicon-cog"></span>
        Look Inside
      </a>
    </div>

    <div class="oppia-content" role="main">
      <div class="conversation-skin-exploration-header">
        <h3 role="heading"><[explorationTitle]></h3>
      </div>

      <div class="conversation-skin-iframe-container">
        <div ng-repeat="response in responseLog track by $index"
             ng-class="{'conversation-skin-last-log-entry': $last}"
             aria-live="<[$last ? 'polite' : 'off']>"
             aria-atomic="true">

          <div ng-if="response.previousReaderAnswer" class="conversation-skin-learner-answer"
              angular-html-bind="response.previousReaderAnswer">
          </div>

          <div class="conversation-skin-oppia-feedback protractor-test-conversation-feedback"
               ng-class="{'conversation-skin-old-content': !$last}">
            <div angular-html-bind="response.feedback">
            </div>
          </div>

          <div ng-if="response.question">
            <div class="conversation-skin-response well"
                 ng-class="{'conversation-skin-old-content': $index !== mostRecentQuestionIndex}">
              <div angular-html-bind="response.question" class="protractor-test-conversation-content">
              </div>
            </div>
          </div>
        </div>

        <br>

        <div ng-show="finished" class="conversation-skin-response-finished">
          Congratulations, you've finished this exploration!
          Would you like to <a ng-click="resetPage()" href="">play again?</a>
        </div>

        <div ng-hide="finished">
          <!-- This iframe must always be contained within a div in
          which it is the only element. For more information, please
          see the ReaderExploration.js file. -->
          <div ng-hide="isAnswerBeingProcessed()">
            <div angular-html-bind="inputTemplate"></div>
          </div>
          <div ng-show="isAnswerBeingProcessed()">
            <center style="font-size: 8em;">
              <span class="oppia-loading-dot-one">.</span>
              <span class="oppia-loading-dot-two">.</span>
              <span class="oppia-loading-dot-three">.</span>
            </center>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
